<template>
  <div class="CustomerInformation">
    <div class="btn-line">
      <button v-for="(item, index) in tabList"
              :key="index"
              v-auth-id="item.authId"
              class="mr10 label-straight wAuto plr10"
              :class="{ active: curTabKey === item.key }"
              @click="handleChangeTab(item.key)">
        {{ item.txt }}
      </button>
    </div>

    <component :is="curTabKey"
               :userId="userId"
               :isSZ="isSZ" />
  </div>
</template>

<script type="text/ecmascript-6">
import StudentsBase from './components/StudentsBase/StudentsBase'
import ManagementExam from './components/ManagementExam/ManagementExam'
import ManagementOrder from './components/ManagementOrder/ManagementOrder'
import ManagementTraining from './components/ManagementTraining/ManagementTraining'
import StudentsProgress from './components/StudentsProgress/StudentsProgress'
import ConsultingComplaint from './components/ConsultingComplaint/ConsultingComplaint'
import TwoBaseTrain from './components/TwoBaseTrain/TwoBaseTrain'

export default {
  name: 'CustomerInformation',
  components: { StudentsBase, ManagementExam, ManagementOrder, ManagementTraining, StudentsProgress, ConsultingComplaint, TwoBaseTrain },
  data () {
    return {
      curTabKey: null,
      isSZ: false,
      tabList: [
        { txt: '学员进度', key: 'StudentsProgress', 'authId': 'COM070010' },
        { txt: '学员基本资料', key: 'StudentsBase', 'authId': 'COM060010' },
        { txt: '考试管理', key: 'ManagementExam', 'authId': 'COM030010' },
        { txt: '订单管理', key: 'ManagementOrder', 'authId': 'COM050010' },
        { txt: '练车管理', key: 'ManagementTraining', 'authId': 'COM040010' },
        { txt: '咨询投诉', key: 'ConsultingComplaint', 'authId': 'COM100010' },
        { txt: '科二基础练车进度', key: 'TwoBaseTrain', 'authId': 'COM110010' }
      ]
    }
  },
  computed: {
    userId () {
      return this.$route.query.id
    }
  },
  created () {
    if (this.$route.query.isSZ) {
      this.isSZ = true
    }
    // 判断权限
    if (this.$route.query.tabKey) {
      const find = this.tabList.find(item => item.key === this.$route.query.tabKey)
      console.log(this.tabList)
      if (find && !this.findAuth(find.authId)) {
        this.$message.error('无此访问权限')
        this.$router.back()
      } else {
        this.curTabKey = this.$route.query.tabKey
      }
    } else {
      let authFlag = false
      this.tabList.forEach(item => {
        if (this.findAuth(item.authId) && !authFlag) {
          authFlag = true
          this.curTabKey = item.key
        }
      })
      if (!authFlag) {
        this.$message.error('无此访问权限')
        this.$router.back()
      }
    }
  },
  methods: {
    handleChangeTab (newKey) {
      this.curTabKey = newKey
      this.$router.replace({ path: '/CustomerInformation', query: { id: this.userId, tabKey: newKey } })
    }
  }
}
</script>

<style rel="stylesheet/scss" type="text/scss" lang="scss">
.CustomerInformation {
  .getId {
    > .el-form-item__label {
      color: #e14a21;
    }
  }
}
</style>
